<template>
  <border-popup ref="borderPopRef" :title="title" @close="close">
    <template #content>
      <div class="content-box">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="拥堵程度" name="first">
            <congestion-degree ref="congestionRef" />
          </el-tab-pane>
          <!-- <el-tab-pane label="失衡程度" name="second">
            <degreeOf-imbalance />
          </el-tab-pane> -->
        </el-tabs>
      </div>
    </template>
  </border-popup>
</template>
<script>
  import { defineComponent, reactive, toRefs } from 'vue';
  import congestionDegree from './congestionDegree.vue';
  import borderPopup from '@/components/borderPopup/index';
  // import degreeOfImbalance from './degreeOfImbalance.vue'

  export default defineComponent({
    components: {
      borderPopup,
      congestionDegree,
    },
    emits: ['close'],
    setup(props, { emit }) {
      const state = reactive({
        activeName: 'first',
        borderPopRef: null,
        congestionRef: null,
        title: '',
      });
      const open = (e, markerData) => {
        console.log('===========================', markerData);
        const title = markerData.title;
        state.title = title;
        console.log(state.title);
        state.congestionRef.selectAddMaker(title);
        state.borderPopRef.open(e);
      };
      const close = () => {
        emit('close');
      };
      const handleClick = (tab, event) => {
        console.log(tab, event);
      };
      return {
        ...toRefs(state),
        handleClick,
        open,
        close,
      };
    },
  });
</script>
<style lang="less" scoped>
  .content-box {
    height: calc(100% - 60px);
  }
  :deep {
    .el-tabs__item {
      color: #6085af;
      font-size: 16px;
    }
    .el-tabs__nav-wrap:after {
      background-color: transparent;
    }
    .el-tabs__item.is-active {
      font-size: 16px;
      font-family: PingFang SC;
      color: #ffffff;
      text-shadow: 0px 0px 4px #4e85ff, 0px 1px 4px #0093ff;
    }
    .el-tabs__active-bar {
      background: url(../../../assets/images/analysis/light.png) no-repeat;
      background-size: 100% 100%;
      height: 28px;
      bottom: -28%;
    }
  }
</style>
